<template>
  <van-popup v-model="show" position="bottom">
    <div class="box">
      <div class="btop">
        <span class="t1">{{ $t("long.zhiyingsun1") }}</span>
        <img
          @click="show = false"
          class="close-img"
          src="../../../assets/images/close.png"
          alt=""
        />
      </div>
      <div class="main1">
        <div
          class="hightop"
          :style="{
            backgroundImage:
              side == '多'
                ? 'url(' + require('../../../assets/images/zhiduo.png') + ')'
                : 'url(' + require('../../../assets/images/zhikong.png') + ')',
            backgroundPosition: side == '多' ? 'left' : 'right',
          }"
        >
          <p @click="side = '多'">{{ $t("common.kaiduo") }}</p>
          <p @click="side = '空'">{{ $t("common.kaikong") }}</p>
        </div>
      </div>
      <div class="zbox">
        <div class="zb1">
          <img
            class="zb-img"
            @click="isZhiYing = !isZhiYing"
            :src="
              isZhiYing
                ? require('../../../assets/images/huangdui.png')
                : require('../../../assets/images/huangduib.png')
            "
            alt=""
          />
          <div>{{$t('common.zhiying')}}</div>
        </div>
        <div class="zbitem" v-show="isZhiYing">
          <div class="zbli">
            <div class="zbli-l">
              <div class="minput1">
                <img
                  @click="handleShowPriceChange('subtract', 'chufaPrice_ying')"
                  class="jian-img"
                  src="../../../assets/images/jian.png"
                  alt=""
                />
                <van-field
                  v-model="submitForm.chufaPrice_ying"
                  :placeholder="$t('long.chufajia') + '（' + 'USDT' + '）'"
                  type="number"
                />
                <img
                  @click="handleShowPriceChange('add', 'chufaPrice_ying')"
                  class="jia-img"
                  src="../../../assets/images/jia.png"
                  alt=""
                />
              </div>
            </div>
            <div class="zbli-r minput1">
              <van-field
                v-model="submitForm.zhangfu_ying"
                :placeholder="$t('long.zhangfu')"
                type="number"
              />
              <div class="weiba">%</div>
            </div>
          </div>
        </div>
        <div class="zbitem" v-show="isZhiYing">
          <div class="zbli">
            <div class="zbli-l">
              <div class="huibox" v-show="priceType_ying == '市价单'">{{ $t("common.shijia") }}</div>
              <div v-show="priceType_ying == '限价单'" class="minput1">
                <img
                  @click="handleShowPriceChange('subtract', 'weituoPrice_ying')"
                  class="jian-img"
                  src="../../../assets/images/jian.png"
                  alt=""
                />
                <van-field
                  v-model="submitForm.weituoPrice_ying"
                  :placeholder="$t('long.weituojia') + '（' + 'USDT' + '）'"
                  type="number"
                />
                <img
                  @click="handleShowPriceChange('add', 'weituoPrice_ying')"
                  class="jia-img"
                  src="../../../assets/images/jia.png"
                  alt=""
                />
              </div>
            </div>
            <div class="zbli-r zlir2" @click="priceTypeChange('ying')">
              {{priceType_ying}}
            </div>
          </div>
        </div>
        <div class="highcontent" v-show="isZhiYing">
          {{ $t("long.tip_gaojizhiyingsun1") }}
          <span style="color: #0a7aff">{{ $t("common.biaojijiage") }}</span>
          {{ $t("long.tip_gaojizhiyingsun2")
          }}<span style="color: #fff">--</span
          >{{ $t("long.tip_gaojizhiyingsun3")
          }}<span style="color: #fff">{{ $t("long.xianjiadan") }}</span
          >{{ $t("long.tip_gaojizhiyingsun4")
          }}<span style="color: #fff">--</span>USDT。
        </div>
      </div>
      <div class="zbox">
        <div class="zb1">
          <img
            class="zb-img"
            @click="isZhiSun = !isZhiSun"
            :src="
              isZhiSun
                ? require('../../../assets/images/huangdui.png')
                : require('../../../assets/images/huangduib.png')
            "
            alt=""
          />
          <div>{{$t('common.zhisun')}}</div>
        </div>
        <div class="zbitem" v-show="isZhiSun">
          <div class="zbli">
            <div class="zbli-l">
              <div class="minput1">
                <img
                  @click="handleShowPriceChange('subtract', 'chufaPrice_sun')"
                  class="jian-img"
                  src="../../../assets/images/jian.png"
                  alt=""
                />
                <van-field
                  v-model="submitForm.chufaPrice_sun"
                  :placeholder="$t('long.chufajia') + '（' + 'USDT' + '）'"
                  type="number"
                />
                <img
                  @click="handleShowPriceChange('add', 'chufaPrice_sun')"
                  class="jia-img"
                  src="../../../assets/images/jia.png"
                  alt=""
                />
              </div>
            </div>
            <div class="zbli-r minput1">
              <van-field
                v-model="submitForm.zhangfu_sun"
                :placeholder="$t('long.zhangfu')"
                type="number"
              />
              <div class="weiba">%</div>
            </div>
          </div>
        </div>
        <div class="zbitem" v-show="isZhiSun">
          <div class="zbli">
            <div class="zbli-l">
              <div class="huibox" v-show="priceType_sun == '市价单'">{{ $t("common.shijia") }}</div>
              <div v-show="priceType_sun == '限价单'" class="minput1">
                <img
                  @click="handleShowPriceChange('subtract', 'weituoPrice_sun')"
                  class="jian-img"
                  src="../../../assets/images/jian.png"
                  alt=""
                />
                <van-field
                  v-model="submitForm.weituoPrice_sun"
                  :placeholder="$t('long.weituojia') + '（' + 'USDT' + '）'"
                  type="number"
                />
                <img
                  @click="handleShowPriceChange('add', 'weituoPrice_sun')"
                  class="jia-img"
                  src="../../../assets/images/jia.png"
                  alt=""
                />
              </div>
            </div>
            <div class="zbli-r zlir2" @click="priceTypeChange('sun')">
              {{priceType_sun}}
            </div>
          </div>
        </div>
        <div class="highcontent" v-show="isZhiSun">
          {{ $t("long.tip_gaojizhiyingsun1") }}
          <span style="color: #0a7aff">{{ $t("common.biaojijiage") }}</span>
          {{ $t("long.tip_gaojizhiyingsun2")
          }}<span style="color: #fff">--</span
          >{{ $t("long.tip_gaojizhiyingsun3")
          }}<span style="color: #fff">{{ $t("long.xianjiadan") }}</span
          >{{ $t("long.tip_gaojizhiyingsun4")
          }}<span style="color: #fff">--</span>USDT。
        </div>
      </div>
      <van-button type="info" class="confirm" @click="handleSubmit">{{
        $t("long.queren")
      }}</van-button>
    </div>
  </van-popup>
</template>

<script>
import { Toast } from "vant";
export default {
  props: ["curyType", "priceObj"],
  data() {
    return {
      side: "多",
      isZhiYing: true,
      isZhiSun: true,
      priceType_ying: "市价单",
      priceType_sun: "市价单",
      submitForm: {
        chufaPrice_ying: "",
        weituoPrice_ying: "",
        zhangfu_ying: "",
        chifaPrice_sun: "",
        weituoPrice_sun: "",
        zhangfu_sun: "",
      },
      show: false,
    };
  },
  created() {},
  computed: {},
  watch: {
    side(val) {
      this.reset()
    },
    "submitForm.zhangfu_ying"(val) {
      if (+val) {
        let price = 0;
        if (this.priceType_ying == "市价单") {
          price = this.priceObj.markPrice;
        } else {
          price = this.submitForm.weituoPrice_ying;
        }
        if (this.side == "多") {
          this.submitForm.chufaPrice_ying = (price * (100 + +val)) / 100;
        } else {
          this.submitForm.chufaPrice_ying = (price * (100 - +val)) / 100;
        }
        this.submitForm.chufaPrice_ying = this.$myfixedNum(
          +this.submitForm.chufaPrice_ying,
          +2
        );
      }
    },
    "submitForm.zhangfu_sun"(val) {
      if (+val) {
        let price = 0;
        if (this.priceType_sun == "市价单") {
          price = this.priceObj.markPrice;
        } else {
          price = this.submitForm.weituoPrice_sun;
        }
        if (this.side == "多") {
          this.submitForm.chufaPrice_sun = (price * (100 - +val)) / 100;
        } else {
          this.submitForm.chufaPrice_sun = (price * (100 + +val)) / 100;
        }
        this.submitForm.chufaPrice_sun = this.$myfixedNum(
          +this.submitForm.chufaPrice_sun,
          +2
        );
      }
    },
  },
  methods: {
    reset(){
      this.isZhiYing = true;
      this.isZhiSun = true;
      this.priceType_ying = "市价单";
      this.priceType_sun = "市价单";
      this.submitForm = {
        chufaPrice_ying: "",
        weituoPrice_ying: "",
        zhangfu_ying: "",
        chifaPrice_sun: "",
        weituoPrice_sun: "",
        zhangfu_sun: "",
      };
    },
    priceTypeChange(type) {
      if (type == "ying") {
        this.priceType_ying =
          this.priceType_ying == "市价单" ? "限价单" : "市价单";
      } else {
        this.priceType_sun =
          this.priceType_sun == "市价单" ? "限价单" : "市价单";
      }
    },
    handleShowPriceChange(type, key) {
      if (type == "add") {
        this.$set(this.submitForm, key, +this.submitForm[key] + 1);
      } else {
        this.$set(this.submitForm, key, +this.submitForm[key] - 1);
      }
    },
    async handleSubmit() {
      let params = {
        hasStopProfit: 0,
        hasStopLost: 0,
      };
      if (this.isZhiYing) {
        //是否止盈
        params.hasStopProfit = 1;
        params.stopProfitType = this.priceType_ying == "市价单" ? 0 : 1;
        params.stopProfitTrigger = this.submitForm.chufaPrice_ying;
        params.stopProfitPrice =
          this.priceType_ying == "市价单"
            ? this.priceObj.markPrice
            : this.submitForm.weituoPrice_ying;
        if (!params.stopProfitPrice || !params.stopProfitTrigger) {
          Toast(this.$t("long.contractn3"));
          return;
        }
      }
      if (this.isZhiSun) {
        params.hasStopLost = 1;
        params.stopLostType = this.priceType_ying == "市价单" ? 0 : 1;
        params.stopLostTrigger = this.submitForm.chufaPrice_sun;
        params.stopLostPrice =
          this.priceType_sun == "市价单"
            ? this.priceObj.markPrice
            : this.submitForm.weituoPrice_sun;
        if (!params.stopLostPrice || !params.stopLostTrigger) {
          Toast(this.$t("long.contractn2"));
          return;
        }
      }
      params.side = this.side;
      this.$emit("openPostionStop", params);
    },
  },
};
</script>

<style lang="scss" scoped>
.van-popup {
  background-color: #090A1B;
}
.box {
  padding: 3vw 3vw 6vw;
  .btop {
    width: 100%;
    height: 10vw;
    position: relative;
    line-height: 10vw;
    text-align: center;
    font-size: 4.5vw;
    .close-img {
      width: 7vw;
      position: absolute;
      right: 0vw;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .main1 {
    padding: 5vw 0 2vw;
  }
}
.van-cell {
  background-color: #171A2B;
  color: #fff !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}
::v-deep .van-field__control {
  color: #fff !important;
}
.confirm {
  width: 100%;
  height: 10vw;
  color: #fff;
  background-color: #1989fa;
  border: 1px solid #1989fa;
}
.red {
  color: #e45360 !important;
}

.green {
  color: #5eba89 !important;
}
.hightop {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 6.7vw;
  width: 95vw;
  height: 7.2vw;
  background-color: #171A2B;
  background-size: contain;
  background-repeat: no-repeat;

  p {
    width: 50%;
  }
}

.zb1 {
  display: flex;
  align-items: center;
  font-size: 3.2vw;
  color: #fff;
  margin-bottom: 4vw;
  .zb-img {
    width: 3.2vw;
    margin-right: 2vw;
  }
}
.minput1 {
  width: 100% !important;
  border-radius: 2px;
  padding: 0 3vw;
  height: 10vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #171A2B;

  .jian-img,
  .jia-img {
    width: 4.8vw;
  }

  .van-field {
    padding: 0;
    width: 100% !important;
    height: 10vw;
    background-color: #171A2B;

    ::v-deep .van-field__body {
      line-height: 10vw;

      .van-field__control {
        text-align: center;
        background-color: #171A2B;
        color: #fff;
        font-weight: 600;
      }

      .van-field__control::-webkit-input-placeholder {
        color: #8992AE;
      }
    }
  }

  ::v-deep .van-cell::after {
    border: 0;
  }
}
.zbitem {
  width: 100%;
  margin-bottom: 2vw;
  .zbli {
    display: flex;
    flex: 1;
    .zbli-l {
      width: 54vw;
      flex: 0 0 54vw;
      display: flex;
      margin-right: 2vw;
    }
    .zbli-r {
      flex: 1;
      position: relative;
      .weiba {
        position: absolute;
        right: 3vw;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .zlir2 {
      height: 10vw;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #171A2B;
    }
  }
}
.huibox {
  width: 54vw;
  flex: 0 0 54vw;
  background-color: #8992AE;
  color: #d6d6d6 !important;
  font-size: 4vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.highcontent {
  text-align: left;
  color: #8992AE;
  line-height: 4.5vw;
  letter-spacing: 2px;
  margin: 4vw 0 8vw;
}
</style>